<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title>Symmetry: Online framework for scientific computations</title>

<!-- external files -->
<link rel="stylesheet" type="text/css" href="styles.css" />
<link type="text/css" rel="StyleSheet" href="slider/slider.css" />

<script type="text/javascript">var switchTo5x=true;</script>
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript" src="http://s.sharethis.com/loader.js"></script>

<script type="text/javascript" src="slider/range.js"></script>
<script type="text/javascript" src="slider/timer.js"></script>
<script type="text/javascript" src="slider/slider.js"></script>

<script src="glMatrix.js" type="text/javascript"></script>
<script src="webgl-utils.js" type="text/javascript"></script>
<script src="webgl.js" type="text/javascript"></script>
<script src="polygon.js" type="text/javascript"></script>
<script src="coord_axes.js" type="text/javascript"></script>
<script src="lin_eq.js" type="text/javascript"></script>
<script src="scene.js" type="text/javascript"></script>
<script src="linear_geometry.js" type="text/javascript"></script>
<script src="dihedral.js" type="text/javascript"></script>
<script src="curve.js" type="text/javascript"></script>
<script src="surface.js" type="text/javascript"></script>
<script src="plotting.js" type="text/javascript"></script>

<script src="tooltip.js" type="text/javascript"></script>
<script src="vecmat_command_panel.js" type="text/javascript"></script>
<script src="lineq_command_panel.js" type="text/javascript"></script>
<script src="groupth_command_panel.js" type="text/javascript"></script>
<script src="poly_command_panel.js" type="text/javascript"></script>
<script src="plotting_command_panel.js" type="text/javascript"></script>
<script src="diff_command_panel.js" type="text/javascript"></script>
<script src="command_panel.js" type="text/javascript"></script>


<!-- shaders -->
<script id="shader-fs" type="x-shader/x-fragment"> 
    #ifdef GL_ES
    precision mediump float;
    #endif

	uniform float uUseTexture;
	varying vec4 vColor;

	varying vec2 vTextureCoord;
	uniform sampler2D uSampler;

    void main(void) 
    {
		vec4 texColor = texture2D(uSampler, vTextureCoord) * uUseTexture;
		vec4 vertColor = vColor * (1.0 - uUseTexture);
		gl_FragColor = texColor + vertColor;
    }
</script> 
<script id="shader-vs" type="x-shader/x-vertex"> 
	attribute vec3 aVertexPosition;
	attribute vec2 aTextureCoord;
	attribute vec4 aVertexColor;

	varying vec4 vColor;
	varying vec2 vTextureCoord;

	uniform mat4 uMVMatrix;
	uniform mat4 uPMatrix;

	void main(void)
	{
		gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
		vTextureCoord = aTextureCoord;
		vColor = aVertexColor;
	}
</script> 

<script type="text/x-mathjax-config">
  MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

<link type="text/css" rel="stylesheet" href="openid/css/openid.css" />
<script type="text/javascript" src="openid/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="openid/js/openid-jquery.js"></script>
<script type="text/javascript" src="openid/js/openid-en.js"></script>
<script type="text/javascript">
	$(document).ready(function() {
		openid.init('openid_identifier');
	});
</script>

</head>

<body id="body_id" bgcolor="#DCE2E7">
<input id="session_key_id" type="hidden" name="hidden" value="00"></input>
<div id="whole_page_id" class="swholepage">
<br/>
<div class="sbanner">
	<nav>
		<div style="font-family:'Arial', Helvetica, sans-serif; font-size:70px; color:#000; text-shadow: 3px 4px 5px #003366">SYMMETRY</div>
		<div>Online framework for scientific computation, simulation and collaboration.</div>
			</br>
			<a onclick="MainMenu.showIntCompdiv()" href="#">Computations</a>
			<a href="#">Simulations</a>
			<a href="/pres.html" target="_self">Presentations</a>
			<a href="/pres.html" target="_self">3D Sketchpad</a>
			<a href="http://code.google.com/p/absalg/" target="_blank">About</a>
			</br></br>
		<div class="nav-left"></div>
		<div class="nav-right"></div>
	</nav>
</div>
<form action="examples/consumer/try_auth.php" method="get" id="openid_form">
		<input type="hidden" name="action" value="verify" />
		<fieldset class="sfieldset1">
			<legend>Sign-in or Create New Account</legend>
			<div id="openid_choice">
				<div id="openid_btns"></div>
			</div>
			<div id="openid_input_area">
				<input id="openid_identifier" name="openid_identifier" type="text" value="http://" />
				<input id="openid_submit" type="submit" value="Sign-In"/>
			</div>
			<noscript>
				<p>OpenID is service that allows you to log-on to many different websites using a single indentity.
				Find out <a href="http://openid.net/what/">more about OpenID</a> and <a href="http://openid.net/get/">how to get an OpenID enabled account</a>.</p>
			</noscript>
		</fieldset>
</form>
<br/>
<br/>

<div id="interactive_comp">
<!--///////////////////////////////////////////////////////////////////// -->

<div class="sradio">  
<hr width="100%">
	<input id="calculus" type="radio" value="calculus" checked="checked" name="category" onclick="MainMenu.showDiv('calculus')" />
	<label for="calculus"><span><span></span></span>Calculus</label>  
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="linalg" type="radio" value="linalg" name="category" onclick="MainMenu.showDiv('linalg')" />  
	<label for="linalg"><span><span></span></span>Linear Algebra</label>  
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="prob" type="radio" value="prob" name="category" onclick="MainMenu.showDiv('prob')" />  
	<label for="prob"><span><span></span></span>Probabilities &amp Statistics</label>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="complex" type="radio" value="complex" name="category" onclick="MainMenu.showDiv('complex')" />
	<label for="complex"><span><span></span></span>Complex Variables</label>
	&nbsp;&nbsp;&nbsp;&nbsp;
	<input id="absalg" type="radio" value="absalg" name="category" onclick="MainMenu.showDiv('absalg')" />  
	<label for="absalg"><span><span></span></span>Abstract Algebra</label>
<hr width="100%">
</div>

<br/>

<div id="computations_panel">
	<div id="calculus_panel" class="scomputations_panel">
		<ul>
		<li id='li_plot_id' class="selected"><a id='a_plot_id' class="selected" onclick="MainMenu.add_plotting_div()" href="#">Plotting &amp Graphics</a></li>
		<li id='li_diff_id'><a id='a_diff_id' onclick="MainMenu.add_diff_div()" href="#">Differentiation</a></li>
		<li id='li_int_id'><a id='a_int_id' href="#">Integration</a></li>
		<li id='li_dif_eq_id'><a id='a_dif_eq_id' href="#">Differential equations</a></li>
		<li id='li_poly_id'><a id='a_poly_id' href="#" onclick="MainMenu.add_poly_div()">Polynomials</a></li>
		</ul>
		<div id="calculus_command_panel" class="scommand_panel">
			<div id='plotting_div_id' onmouseover="Tooltip.show('plotting')" onmouseout="Tooltip.hide()" class="sinput_div_id">
				<br/>
				<textarea id='fct_area_id' rows="3" cols="60">
				</textarea>
				<br/>
				<a href="#" class="plotbutton" onclick="PlottingPanel.submitFct()">Plot</a>
				<br/>
				<br/>
				<div id='added_input_id5' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
			</div>
			<div id='diff_div_id' onmouseover="Tooltip.show('differentiation')" onmouseout="Tooltip.hide()" class="sinput_div_id" style="display: none;">
				<br/>
				<textarea id='fct_area_id1' rows="3" cols="60">
				</textarea>
				<br/>
				<a href="#" class="plotbutton" onclick="DiffPanel.submitFct()">Differentiate</a>
				<br/>
				<br/>
				<div id='added_input_id6' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
			</div>
			<div id='poly_div_id' onmouseover="Tooltip.show('poly')" onmouseout="Tooltip.hide()" class="sinput_div_id" style="display: none;">
				<div id='input_div_contents_id1'>

				<br/>
				<select id='poly_select_id' name='Select polynomial type' onchange='PolyPanel.polySelection(this)'>
					<option>Single Variable Polynomial</option>
					<option>Multivariable Polynomial(not implemented)</option>
				</select>
				<br/>
				<br/>
				<div id='insert_poly_id'>
					Degree: &nbsp;&nbsp;&nbsp;
					<input type='text' id='degree_id' value='3' size='2' maxlength='2' onkeyup="PolyPanel.degreeChanged(this)" />
					<br/><br/>
					<table id="poly_table_id" border="1" cellspacing="10" align="center">
					<tr>
					<td><input type='text' id='entry1' size='8' maxlength='15' />$x^0$</td>
					<td><input type='text' id='entry2' size='8' maxlength='15' />$x^1$</td>
					<td><input type='text' id='entry3' size='8' maxlength='15' />$x^2$</td>
					<td><input type='text' id='entry4' size='8' maxlength='15' />$x^3$</td>
					</tr>
					</table>
				</div>
				<br/>
				<input type='submit' value='Submit' onclick="PolyPanel.submitPoly()" />
				<br/>
				<div id='added_input_id4' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
				<br/>
				</div>
			</div>
			<div id="poly_panel" class="sbutton" style= "display: none; ">
				<fieldset class='sfieldset'>
				<legend>Available commands</legend>
				<a id="command_get_roots" href="#" onmouseover="Tooltip.show('roots')" onmouseout="Tooltip.hide()" onclick="PolyPanel.submit_command('GET_POLY_ZEROS'); return false;">Roots</a>
				<a id="command_discriminant" href="#" onmouseover="Tooltip.show('discriminant')" onmouseout="Tooltip.hide()" onclick="PolyPanel.submit_command('GET_POLY_DISCRIMINANT'); return false;">Discriminant</a> 
				<a id="command_plot" href="#" onmouseover="Tooltip.show('plot')" onmouseout="Tooltip.hide()" onclick="PolyPanel.submit_command('GET_POLY_PLOT'); return false;">Plot</a> 
				</fieldset>
			</div>
		</div>
	</div><!--calculus-->

	<div id="linear_algebra_panel" class="scomputations_panel" style="display: none;">
		<ul>
		<li id='li_lineq_id'><a id='a_lineq_id' href="#" class="selected" onclick="MainMenu.add_lineq_div()">Systems of linear equations</a></li>
		<li id='li_mat_id'><a id='a_mat_id' href="#" onclick="MainMenu.add_vecmat_div()">Vectors & Matrices</a></li>
		</ul>
		<div id="linalg_command_panel" class="scommand_panel">
			<div id='lineq_div_id' onmouseover="Tooltip.show('lineq')" onmouseout="Tooltip.hide()" class="sinput_div_id" style="display: none;">
				<div id='input_div_contents_id2'>
				<br/>
				Number of equations: &nbsp;&nbsp;&nbsp;
				<input type='text' id='lineq_number' value='3' size='2' maxlength='2' onkeyup="LinEqPanel.lineq_num_changed(this)" />
				&nbsp;&nbsp;&nbsp;
				&nbsp;&nbsp;&nbsp;
				Number of unknowns: &nbsp;&nbsp;&nbsp;
				<input type='text' id='unknowns_number' value='3' size='2' maxlength='2' onkeyup="LinEqPanel.unknowns_num_changed(this)" />
				<br/><br/>
				<table id="lineq_table_id" border="1" cellspacing="10" align="center">
				<tr>
				<td><input type='text' id='unknown11' size='5' maxlength='15' /> $x_1$</td>
				<td><input type='text' id='unknown12' size='5' maxlength='15' /> $x_2$</td>
				<td><input type='text' id='unknown13' size='5' maxlength='15' /> $x_3$</td>
				<td><input type='text' id='result1' size='5' maxlength='15' /> $b_1$</td>
				</tr>
				<tr>
				<td><input type='text' id='unknown21' size='5' maxlength='15' /> $x_1$</td>
				<td><input type='text' id='unknown22' size='5' maxlength='15' /> $x_2$</td>
				<td><input type='text' id='unknown23' size='5' maxlength='15' /> $x_3$</td>
				<td><input type='text' id='result2' size='5' maxlength='15' /> $b_2$</td>
				</tr>
				<tr>
				<td><input type='text' id='unknown31' size='5' maxlength='15' /> $x_1$</td>
				<td><input type='text' id='unknown32' size='5' maxlength='15' /> $x_2$</td>
				<td><input type='text' id='unknown33' size='5' maxlength='15' /> $x_3$</td>
				<td><input type='text' id='result3' size='5' maxlength='15' /> $b_3$</td>
				</tr>
				</table>
				<br/>
				<input type='submit' value='Submit' onclick="LinEqPanel.submitSystem()" />
				<br/>
				<div id='added_input_id2' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
				<br/>
				</div>
			</div>
			<div id="lineq_commands_panel" class="sbutton" style= "display: none; ">
				<fieldset class='sfieldset'>
				<legend>Available commands</legend>
				<a id="command_solve_lineq_system" href="#" onmouseover="Tooltip.show('solve_lineq')" onmouseout="Tooltip.hide()" onclick="LinEqPanel.submit_command('SOLVE_LINEQ_SYS'); return false;">Solve system</a> 
				<a id="command_approx_lineq_system" href="#" onmouseover="Tooltip.show('approx_lineq')" onmouseout="Tooltip.hide()" onclick="LinEqPanel.submit_command('APPROX_LINEQ_SYS'); return false;">Least Squares Approximation</a> 
				<a id="command_solveg_lineq_system" href="#" onmouseover="Tooltip.show('solveg_lineq')" onmouseout="Tooltip.hide()" onclick="LinEqPanel.submit_command('SOLVEG_LINEQ_SYS'); return false;">General solution</a> 
				</fieldset>
			</div>

			<div id='vecmat_div_id' onmouseover="Tooltip.show('vecmat')" onmouseout="Tooltip.hide()" class="sinput_div_id" style="display: none;">
				<div id='input_div_contents_id3'>

				<br/>
				<select id='matrix_select_id' name='Select matrix input' onchange='VecMatPanel.matrixSelection(this)'>
					<option>Input a matrix</option>
					<option>Input a vector (column matrix)</option>
					<option>Input a matrix expression - linear combination (using latex)</option>
				</select>

				<br/>
				<br/>
				<div id='insert_matrix_id'>
					Number of rows: &nbsp;&nbsp;&nbsp;
					<input type='text' id='rows_number_id' value='3' size='2' maxlength='2' onkeyup="VecMatPanel.rows_num_changed(this)" />
					&nbsp;&nbsp;&nbsp;
					&nbsp;&nbsp;&nbsp;
					Number of columns: &nbsp;&nbsp;&nbsp;
					<input type='text' id='cols_number_id' value='3' size='2' maxlength='2' onkeyup="VecMatPanel.cols_num_changed(this)" />
					<br/><br/>
					<table id="mat_table_id" border="1" cellspacing="10" align="center">
					<tr>
					<td><input type='text' id='entry11' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry12' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry13' size='8' maxlength='15' /></td>
					</tr>
					<tr>
					<td><input type='text' id='entry21' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry22' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry23' size='8' maxlength='15' /></td>
					</tr>
					<tr>
					<td><input type='text' id='entry31' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry32' size='8' maxlength='15' /></td>
					<td><input type='text' id='entry33' size='8' maxlength='15' /></td>
					</tr>
					</table>
				</div>

				<div id='insert_matrix_expr_id' style="display: none;">
				<textarea id='mat_expr_text_id' cols='40' rows='10'>$\left( \begin{bmatrix} 3 & 9 & 8 \\ 4 & 6 & 2 \\ 0.5 & 1 & 9\end{bmatrix} + \begin{bmatrix} 1 & 2 & 5 \\ 4 & 5 & 6 \\ -1 & 0.5 & -1 \end{bmatrix} \right) * \begin{bmatrix} 7 \\ 8 \\ 9 \end{bmatrix}$</textarea>
				</div>

				<br/>
				<input type='submit' value='Submit' onclick="VecMatPanel.submitMat()" />
				<br/>
				<div id='added_input_id3' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
				<br/>
				</div>
			</div>
			<div id="vecmat_commands_panel" class="sbutton" style="display: none;">
				<fieldset class='sfieldset'>
				<legend>Available commands</legend>
				<a id="command_get_norm" href="#" onmouseover="Tooltip.show('norm')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_NORM'); return false;">Euclidean Norm</a>
				<a id="command_get_inverse" href="#" onmouseover="Tooltip.show('mat_inverse')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_MAT_INVERSE'); return false;">Inverse Matrix</a> 
				<a id="command_determinant" href="#" onmouseover="Tooltip.show('mat_determinant')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_MAT_DETERMINANT'); return false;">Determinant and Trace</a> 
				<a id="command_rref" href="#" onmouseover="Tooltip.show('mat_rref')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_MAT_RREF'); return false;">Reduced Echelon Form</a> 
				<a id="command_gramsch" href="#" onmouseover="Tooltip.show('gramsch')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_MAT_QR'); return false;"><del>Orthogonalization</del></a> 
				<a id="command_eigenvalues" href="#" onmouseover="Tooltip.show('eigenvalues')" onmouseout="Tooltip.hide()" onclick="VecMatPanel.submit_command('GET_MAT_EIGENVALUES'); return false;"><del>Eigenvalues</del></a> 
				</fieldset>
			</div>
		</div>
	</div><!--linear algebra-->

	<div id="probabilities_panel" class="scomputations_panel" style="display: none;">
		<ul>
		<li id='distrib'><a id='a_distrib_id' href="#">Distributions</a></li>
		</ul>
	</div><!--probabilities-->

	<div id="absalg_panel" class="scomputations_panel" style="display: none;">
		<ul>
		<li id='li_grp_id'><a id='a_grp_id' href="#" class="selected" onclick="MainMenu.add_grp_div()">Group Theory</a></li>
		<li id='li_ring_id'><a id='a_ring_id' href="#" onclick="MainMenu.add_grp_div()">Rings & Ideals</a></li>
		</ul>
		<div id="grp_command_panel" class="scommand_panel">
			<div id='grp_div_id' onmouseover="Tooltip.show('generator')" onmouseout="Tooltip.hide()" class="sinput_div_id" style="display: none;">
				<div id='input_div_contents1_id'>
				&nbsp;&nbsp;&nbsp;
				<form action='' onsubmit='return GrpPanel.submit_grp()'>
				<select id='grptype_sel_id' name='Group Type' onchange=''>
					<option>Small Permutation Groups</option>
					<option><del>Large Permutation Groups(not implemented)</del></option>
					<option><del>Linear Groups(not implemented)</del></option>
					<option><del>Quotient Groups(not implemented)</del></option>
					<option><del>Topological Groups(not implemented)</del></option>
				</select>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				Select a small permutation group type: &nbsp;&nbsp;&nbsp;
				<select id='grp_sel_id' name='Group' onchange='GrpPanel.changeGrpType(this)'>
					<option>Symmetric Group</option>
					<option>Cyclic Group</option>
					<option>Dihedral Group</option>
				</select>
				<br/><br/><hr /><br/>
					<div id='generators_div_id'>
					Enter generator: &nbsp;&nbsp;&nbsp;
					<input type='text' id='generator_id' />
					&nbsp;&nbsp;&nbsp;
					<input type='button' value='Add' onclick='GrpPanel.add_generator()' />
					&nbsp;&nbsp;&nbsp;
					--OR--&nbsp;
					Add a predefined group: &nbsp;&nbsp;&nbsp;
					<select id='Groups' size='1' onchange='GrpPanel.add_generators(this)'>
						<option value=''></option>
						<option value='S3'>S3</option>
						<option value='S4'>S4</option>
						<option value='D8'>D8</option>
					</select><br/><br/>
					</div>
				Generators:<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
				<select id='generators_id' size='5' style='background: #FBFDFB; width: 200px;'></select>
				&nbsp;&nbsp;&nbsp;
				<div>
					<input type='button' value='Clear' onclick='GrpPanel.clear_generators()' />
					<input type='submit' value='Submit' />
				</div>
				</form>
				<br/>
				<div id='added_input_id1' class='saddedinput_div_id' style='text-align:center; display:none;'></div>
				<br/>
				</div>
			</div>
			
			<div id="group_commands_panel" class="sbutton" style= "display: none; ">
				<fieldset class='sfieldset'>
				<legend>Available commands</legend>
				<a id="command_get_elements" href="#" onmouseover="Tooltip.show('get_elem')" onmouseout="Tooltip.hide()" onclick="GrpPanel.submit_command('GET_ELEMENTS'); return false;">Group Elements</a> 
				<a id="command_get_cgraph" href="#" onmouseover="Tooltip.show('get_cgraph')" onmouseout="Tooltip.hide()" onclick="GrpPanel.submit_command('GET_CGRAPH'); return false;">Cayley Graph</a> 
				<a id="command_get_relations" href="#" onmouseover="Tooltip.show('get_rel')" onmouseout="Tooltip.hide()" onclick="GrpPanel.submit_command('GET_RELATIONS'); return false;">Group Relations</a> 
				<a id="command_get_center" href="#" onmouseover="Tooltip.show('get_center')" onmouseout="Tooltip.hide()" onclick="GrpPanel.submit_command('GET_CENTER'); return false;">Center Subgroup Elements</a> 
				</fieldset>
			</div>
		</div>
	</div><!--abs_alg-->

	<br/>	
	<div id="main_view_id" class ="smain_view" style= "display: none;"></div>
	<div id="canvas_id" class="scanvasdiv" style="display: none;">
	<canvas id="main_canvas" class="scanvas" width='512' height='512'>Your browser doesn't support canvas tag. Please update to a recent version in order to take full advantage when viewing this page.</canvas>
	</div>
	<canvas id ='textCanvas' style="border: 1px solid #aaa; visibility: hidden;" width="512" height="64"></canvas>

</div><!--computations_panel-->

</div><!--interactive_comp-->
<!--///////////////////////////////////////////////////////////////////// -->

<div id="scripting">

</div><!--scripting-->
<!--///////////////////////////////////////////////////////////////////// -->

<div align="center" id="final" style="text-align:center; position: fixed; bottom: 0;">Andrei Milea 2013</div>
</div><!--whole_page-->
<br/>

<script type="text/javascript">stLight.options({publisher: "ur-a6ce419d-157c-717d-4539-18f4f9b41f68", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<script>
var options={ "publisher": "ur-a6ce419d-157c-717d-4539-18f4f9b41f68", "position": "left", "ad": { "visible": false, "openDelay": 5, "closeDelay": 0}, "chicklets": { "items": ["facebook", "twitter", "linkedin", "pinterest", "email", "sharethis"]}};
var st_hover_widget = new sharethis.widgets.hoverbuttons(options);
</script>

</body>

</html>

